import React from 'react';
import { SeriesProductsC, PrimaryC, FirstHeaderC, SecondHeaderC, DATA_ENTRY, AdvancedSearch } from '../../../components';
import { Form } from 'antd';

class SeriesProductsDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      init2: '4b1a41b817334312bbc79d2c0ddddf9b',
      2: undefined,
      init4: ['4b1a41b817334312bbc79d2c0ddddf9b', 'eb0c286ad8d14241a88cdb3363371171'],
      init5: undefined,
    };

    setTimeout(() => {
      this.setState({
        2: 'bccff2318539484d9c154b9952f6b82e',
        init5: ['4b1a41b817334312bbc79d2c0ddddf9b', 'eb0c286ad8d14241a88cdb3363371171'],
      });
    }, 3000);
  }

  onClick2 = () => {
    this.state.SeriesProductsC2.setSelect('eb0c286ad8d14241a88cdb3363371171');
  };

  onClick3 = () => {
    this.state.SeriesProductsC3.setSelect('eb0c286ad8d14241a88cdb3363371171');
  };

  onClick4 = () => {
    this.state.SeriesProductsC4.setSelect(['eb0c286ad8d14241a88cdb3363371171', 'bccff2318539484d9c154b9952f6b82e']);
  };

  onClick5 = () => {
    this.state.SeriesProductsC5.setSelect(['eb0c286ad8d14241a88cdb3363371171', 'bccff2318539484d9c154b9952f6b82e']);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='基本用法' />
        <Form ref={this.formRef}>
          <div style={{ width: '500px' }}>
            <SecondHeaderC title='无初始化值' />
            <SeriesProductsC form={this.formRef.current} dataIndex='series1' onChange={(e) => console.log(e)} />
            <SecondHeaderC title='有初始化值-同步' />
            <SeriesProductsC
              form={this.formRef.current}
              dataIndex='series2'
              initialValue={this.state.init2}
              onRef={(ref) => this.setState({ SeriesProductsC2: ref })}
              onChange={(e) => console.log(e)}
            />
            <PrimaryC onClick={this.onClick2} title='修改' />
            <SecondHeaderC title='有初始化值-异步' />
            <SeriesProductsC
              form={this.formRef.current}
              dataIndex='series3'
              initialValue={this.state.init3}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ SeriesProductsC3: ref })}
            />
            <PrimaryC onClick={this.onClick3} title='修改' />
            <SecondHeaderC title='多选模式初始化-同步' />
            <SeriesProductsC
              form={this.formRef.current}
              dataIndex='series4'
              multiple={true}
              initialValue={this.state.init4}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ SeriesProductsC4: ref })}
            />
            <PrimaryC onClick={this.onClick4} title='修改' />
            <SecondHeaderC title='多选模式初始化-异步' />
            <SeriesProductsC
              form={this.formRef.current}
              dataIndex='series5'
              multiple={true}
              initialValue={this.state.init5}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ SeriesProductsC5: ref })}
            />
            <PrimaryC onClick={this.onClick5} title='修改' />
            <SecondHeaderC title='设置校验规则' />
            <SeriesProductsC form={this.formRef.current} dataIndex='series6' rules={[{ required: true, message: '请选择系列产品!' }]} onChange={(e) => console.log(e)} />
            <SecondHeaderC title='设置帮助信息' />
            <SeriesProductsC form={this.formRef.current} dataIndex='series7' helper='lalal' onChange={(e) => console.log(e)} />
            <SecondHeaderC title='禁用' />
            <SeriesProductsC form={this.formRef.current} dataIndex='series8' disabled={true} onChange={(e) => console.log(e)} />
          </div>
        </Form>
        <FirstHeaderC title='在查询条件中引用' />
        <AdvancedSearch
          dataSource={[
            {
              dataIndex: 'series9',
              type: DATA_ENTRY.SERIESPRODUCTS,
              initialValue: this.state.init2,
            },
          ]}
          onQuery={(e) => console.log(e)}
        />
      </div>
    );
  }
}

export default SeriesProductsDemo;
